<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #box {
        width: 300px;
        height: 300px;
        background: red;
        display: flex;
        position: absolute;
        right: 50px;
        top: 100px;
      }
      #box p {
        width: 250px;
        height: 300px;
        font-size: 24px;
        text-indent: 2em;
      }
      body > p {
        font-size: 32px;
        text-align: center;
      }
      span {
        display: block;
        width: 50px;
        height: 300px;
        background: green;
        font-size: 40px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <span id="span1">侧边栏=》</span>
      <p>哈迪斯撒娇是的撒旦很骄傲和打电话嘎嘎的撒旦很骄傲和打电话嘎嘎的撒旦很骄傲和打电话嘎嘎的撒旦很骄傲和打电话嘎嘎打火锅的萨达化</p>
    </div>
    <p id="pp1">上课不要睡觉，好好学习</p>
    <script type="text/javascript">
      var Pp1 = document.getElementById('pp1')
      for (let i = 0; i <= 40; i++) {
        var p1 = Pp1.cloneNode()
        var text1 = document.createTextNode('上课不要睡觉，好好学习')
        p1.appendChild(text1)
        document.body.appendChild(p1)
      }

      var oSpan = document.getElementById('span1')
      var oBox = document.getElementById('box')
      window.onscroll = function () {
        var Scroll = document.documentElement.scrollTop || document.body.scrollTop
        var cH = document.documentElement.clientHeight
        // clientHeight 元素的像素高度，包含元素的高度+内边距，不包含水平滚动条，边框和外边距
        console.log('document.documentElement.clientHeight: ' + cH)
        console.log(Scroll)
        console.log('oBox.scrollTop: ' + oBox.scrollTop)
        console.log('document.documentElement.scrollTop: '+ document.documentElement.scrollTop)
        console.log('document.body.scrollTop: '+ document.body.scrollTop)
        console.log('oBox.style.top: '+oBox.style.width)
      }
    </script>
  </body>
</html>
